<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="80px">
			<div class="app-space-between">
				<div class="app-space-between-left">
					<el-form-item label="商品分类:" prop="goodsTypeName">
						<div style="width: 200px; font-size:13px;height:32px;">
							<treeselect v-model="queryParams.goodsTypeName" @change="handleQuery"
								:options="[{goodsTypeId:'',goodsTypeParentName:'根目录'},...dataTable]"
								:normalizer="normalizer" :show-count="true" placeholder="选择上级菜单" />
						</div>
					</el-form-item>
					<el-form-item label="商品名称:" prop="goodsName">
						<el-input v-model="queryParams.goodsName" placeholder="请输入商品名称" clearable @clear="handleQuery"
							@keyup.enter.native="handleQuery" />
					</el-form-item>
					<el-form-item label="商品状态:" prop="isOnshow">
						<el-select v-model="queryParams.isOnshow" placeholder="请选择商品状态" @change="handleQuery" clearable
							@clear="handleQuery">
							<el-option label="已上架" value="已上架" />
							<el-option label="已下架" value="已下架" />
						</el-select>
					</el-form-item>
				</div>
				<div class="app-space-between-right">
					<el-form-item>
						<!-- <el-button type="primary" size="mini" @click="handleResetApi">价格日历初始化</el-button> -->
						<el-button type="primary" size="mini" @click="handleQuery">搜索</el-button>
						<el-button size="mini" @click="resetQuery">重置</el-button>
					</el-form-item>
				</div>
			</div>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain size="mini" @click="handleAdd">新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="primary" plain size="mini" :disabled="single" @click="handleUpdate">编辑</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="primary" plain size="mini" :disabled="multiple" @click="handleDelete">删除</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="商品名称" align="center" prop="goodsName" min-width="200">
				<template slot-scope="scope">
					<div>
						<span>{{scope.row.goodsName}}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="商品分类" align="center" prop="goodsTypeName" min-width="120" />
			<el-table-column label="商品价格(元)" align="center" prop="sellingPrice" min-width="120" />
			<el-table-column label="报警库存量" align="center" prop="minInventory" min-width="120" />
			<el-table-column label="最高库存量" align="center" prop="maxInventory" min-width="120" />
			<el-table-column label="商品状态" align="center" prop="isOnshow" min-width="120" />
			<el-table-column label="商品属性" align="center" prop="f2" min-width="160" />
			<el-table-column label="操作" align="center" prop="postName" width="140" fixed="right">
				<template slot-scope="scope">
					<el-button size="mini" type="text" @click="handleDate(scope.row)">价格日历</el-button>
					<!-- <el-button size="mini" type="text" @click="handleConfig(scope.row)">属性配置</el-button> -->
					<el-button size="mini" type="text" @click="handleUp(scope.row)">上下架</el-button>
					<!-- <el-button size="mini" type="text" @click="handleEv(scope.row)">评论</el-button> -->
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />

		<!-- 上下架 -->
		<com-upper ref="com-upper" />
		<!-- 属性配置 -->
		<com-configure ref="com-configure" />
		<!-- 新增 编辑 查看 -->
		<com-edit ref="com-edit" @success="getList" />
		<!-- 评论 -->
		<com-evaluate ref="com-evaluate" />
	</div>
</template>

<script>
	import {
		goodsList,
		goodsDelete,
		priceCalendarInitialization
	} from "@/api/shopping/content"
	import {
		goodsTypeList,
	} from "@/api/shopping/column"
	import comUpper from './components/Upper'
	import comConfigure from './components/Configure'
	import comEdit from './components/Edit'
	import comEvaluate from "./components/Evaluate"
	import Treeselect from "@riophae/vue-treeselect"
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	import {
		getConfigKey
	} from "@/api/system/config.js";
	export default {
		name: "ShoppingContent",
		dicts: ['sys_normal_disable'],
		components: {
			comUpper,
			comConfigure,
			comEdit,
			comEvaluate,
			Treeselect
		},
		data() {
			return {
				// 遮罩层
				loading: false,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 岗位表格数据
				postList: [],
				// 弹出层标题
				title: "",
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					goodsName: undefined,
					goodsTypeName: undefined,
					isOnshow: undefined
				},
				dataTable: [],
				dataOptions: [],
				// 表单参数
				form: {},
				// 表单校验
				rules: {
					postName: [{
						required: true,
						message: "岗位名称不能为空",
						trigger: "blur"
					}],
					postCode: [{
						required: true,
						message: "岗位编码不能为空",
						trigger: "blur"
					}],
					postSort: [{
						required: true,
						message: "岗位顺序不能为空",
						trigger: "blur"
					}]
				},
				minute: 0,
				time: null
			};
		},
		watch: {
			'queryParams.goodsTypeName'(e) {
				if (e) this.handleQuery();
			}
		},
		beforeDestroy() {
			if (this.time) clearInterval(this.time);
		},
		async created() {
			let res2 = await getConfigKey("sys.refresh"); //刷新时间
			await this.getList();
			await goodsTypeList({}).then(response => {
				this.dataOptions = response.rows
				this.dataTable = this.handleTree(response.rows, 'goodsTypeId', 'goodsTypeParentid')
			})
		},
		methods: {
			async handleResetApi(){
				let res = await priceCalendarInitialization();
				this.$message.success("价格日历初始化操作成功")
			},
			handleDate(options) {
				this.$router.push({
					path: `/shopping/content/index/${options.goodsId}`,
					query: {
						minInventory: options.minInventory,
						lt:new Date(options.lastOnshowTime).getTime(),
						st:new Date(options.fromOnshowTime).getTime()
					}
				});
			},
			/** 转换菜单数据结构 */
			normalizer(node) {
				if (node.children && !node.children.length) {
					delete node.children;
				}
				return {
					id: node.goodsTypeParentName,
					label: node.goodsTypeParentName,
					children: node.children
				};
			},
			handleUp(options) {
				this.$refs['com-upper'].init(options)
			},
			handleEv(options) {
				this.$refs['com-evaluate'].init(options)
			},
			handleConfig(options) {
				this.$refs['com-configure'].init(options)
			},
			/** 查询岗位列表 */
			getList() {
				if (this.loading) return
				this.loading = true;
				let form = {
					goodsTypeName: '',
					...this.queryParams
				}
				if (form.goodsTypeId) {
					this.dataOptions.forEach(item => {
						if (item.goodsTypeId == this.queryParams.goodsTypeId) form.goodsTypeName = item
							.goodsTypeName
					})
				}
				delete form.goodsTypeId
				goodsList(form).then(response => {
					this.postList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					postId: undefined,
					postCode: undefined,
					postName: undefined,
					postSort: 0,
					status: "0",
					remark: undefined
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.goodsId)
				this.single = selection.length != 1
				this.multiple = !selection.length
			},
			/** 新增按钮操作 */
			handleAdd() {
				// this.$router.push('/shopping/content/edit')
				this.$refs['com-edit'].init({
					title: '新增'
				})
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.$refs['com-edit'].init({
					title: '编辑',
					goodsId: this.ids.toString()
				})
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				let postIds = row.goodsId || this.ids;
				if (Array.isArray(postIds)) postIds = postIds.toString()
				this.$modal.confirm('此操作将要删除所选数据是否继续？').then(function() {
					return goodsDelete(postIds);
				}).then(() => {
					this.getList();
					this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
			},
		}
	};
</script>
<style lang="scss" scoped>
	::v-deep .vue-treeselect__control {
		height: 32px;
		display: block;
		table-layout: none;
		padding-right: 10px !important;
		box-sizing: border-box !important;
	}

	::v-deep .vue-treeselect__placeholder,
	.vue-treeselect__single-value {
		line-height: 32px !important;
	}

	::v-deep .vue-treeselect__x-container {
		padding-right: 15px !important;
	}
</style>
